<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta name="viewport"
	content="width=device-width, maximum-scale=1.0, initial-scale=1.0,initial-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="keywords" content="盒子实验室 BOX LAB,论坛，社区">
<meta name="description" content="针对国内青少年STEAM创客教育建设的，提供教学案例，案例代码，国内外一手资源和创新实验信息等的开源交流社区。">
<title>盒子实验室 BOX LAB注册</title>
<link rel="stylesheet" href="/css/global.css">
<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico?t=${.now?long}"/>
<link rel="stylesheet" href="/css/layui.css">
<link rel="stylesheet" href="/css/login.css">
<!-- <link rel="stylesheet" href="/intlTelInput/build/css/intlTelInput.css"> -->
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/layui.js"></script>
<!-- <script src="/intlTelInput/build/js/intlTelInput.js"></script> -->
<style type="text/css">
.intl-tel-input {
	width: calc(100% + 18px)
}
.HIDE-INPUT {
    visibility: hidden;
}
.showCountry{
    width: calc(100% - 64px);
    height: 32px;
    background-color: #FBFBFB !important;
    border-radius: 4px;
    font-size: 12px;
    color: #3E3E3E;
    display: inline-block;
    border: 1px solid #CDCDCD;
    position: absolute;
    top: 0;
    left: 12px;
    padding-left: 50px;
    line-height: 32px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>
</head>
<body>
<!-- 菜单 -->
<div class="phone-menu-box">
	<div class="phone-nav">
		<ul>
			<li onclick="hideMenu();">
				<a><span class="close"></span><span>页面导航</span></a>
			</li>
			<li class="<#if subtype?? && subtype == 'index'>layui-this</#if>">
				<a class="" href="/">论坛首页</a>
			</li>
			<li class="<#if subtype?? && (subtype == 'topicIndex' || subtype == 'accept' || subtype == 'finsh' || subtype == 'essence')>layui-this</#if>">
				<a href="#" class="" onclick="searchHref('','','','topicIndex')">谈天说地</a>
			</li>
			<li class="<#if subtype?? && subtype == 'microcase' && typename == 'microcaseindex'>layui-this</#if>">
				<a class="" href="/microcase/allList">下载中心</a>
			</li>
			<li class="">
				<a target="_blank" href="https://store.myboxlab.com/f">商城<span></span></a>
			</li>
		</ul>
	</div>
</div>
<div class="" id="modal" onclick="hideMenu();"></div>
<div class="phone-head">
	<div class="phone-menu" onclick="showMenu();"></div>
	<div class="phone-logo">
		<span class="logo-icon"></span>
		<span class="logo-text">盒子实验室</span>
	</div>
	<div class="phone-user">
		<#if user??>
			<a href="/user/index.html"><img class="user-head-img layui-circle" src="/${user.fileurl!''}" onerror="this.src='/images/user/default.jpg';this.onerror=null"></a>
		<#else>
			<a href="/reg.html">注册</a>
			<a href="/login.html">&nbsp;|&nbsp;登录</a>
		</#if>
	</div>
</div>
<div class="back-bar pc-display-none">
 	<a href="window.location.href=document.referrer" ><i class="fa fa-angle-left"></i></a>
 	<span>注册</span>
 	<a href="/login.html">登录</a>
</div>
	<div class="login-box registry text">
		<div class="login-logo">
			<a href="/"> <img src="/images/boxlab.png">
			</a>
		</div>
		<div class="login-box-body"  id="content">
		 ${(registrylist[0].registrycontent)?no_esc}
		</div>
		<div class="login-agreement">
			<button class="button-add" onclick="agreeRegistry()">同意</button>
			<a class="button-no-registry" href="/">不同意</a>
		</div>
	</div>
	<div class="login-box reg   layui-hide">
		<div class="login-logo">
			<a href="/"> <img src="/images/boxlab.png">
			</a>
		</div>
		<p class="login-box-msg">盒子实验室 BOX LAB账号注册</p>
		<!-- /.login-logo -->
		<div class="login-box-body">
			
			<form id="loginForm" action="/reg.html" class="loginFormWrapper" method="post" >
				<input type="hidden" name="zonenumber" value="86">
				<input type="hidden" name="email" >
				<#if referer??>
				<input type="hidden" name="referer" value="${referer!''}"/>
				</#if>
				<div class="reg-page reg-first">
					<div class="reg-line layui-hide">
						 <label>国家/地区</label>
						 <div class="form-group has-feedback  reg">
							<input type="text" name="country" id="country" maxlength="20" class="form-control HIDE-INPUT" placeholder="请选择国家/地区" >                        
							<span class="showCountry" onclick="$('#country').intlTelInput('countryShow');">中国</span>
						</div>
						<span class="error-msg"></span>
					</div>
					<div class="reg-line">
						<label>绑定手机号</label>
						 <div class="form-group has-feedback  reg">
							<input type="text" name="mobile" id="mobile" maxlength="20" class="form-control" placeholder="请在输入手机号">                        
						</div>
						<span class="error-msg"></span>
					</div>
					<div class="reg-line second-box-big" style="margin-top:30px;text-align: center;">
						<button type="button" class="button-add" onclick="showReg('reg-second','phone')" style="width: 270px;">下一步</button>
					</div>
				</div>
				<div class="reg-page reg-second  layui-hide">
					<div class="reg-line">
						 <div class="form-group code  reg">
							<p>我们已发送一条短信至，<span id="userPhone"></span></p>
							<p>请输入短信中的验证码</p>
						</div>
					</div>
					<div class="reg-line">
						<label class="mobile-display-none"></label>
						 <div class="form-group code  reg" style="margin-bottom: 10px;">
							<input class="form-control mobile-code" type="text" id="telCode" name="smsCode" placeholder="验证码">
					        <a class="sendCode" onclick="checkCode(this)" >发送验证码</a>
						</div>
						<span class="error-msg"></span>
					</div>
					<div class="reg-line second-box" style="margin-top:30px;">
						<button type="button" class="button-add" onclick="showReg('reg-first')">上一步</button>
						<button type="button" class="button-add" onclick="showReg('reg-third','code')">下一步</button>
					</div>
				</div>
				<div class="reg-page reg-third layui-hide">
					<div class="reg-line">
						<label>我的昵称</label>
						 <div class="form-group has-feedback   reg">
							<input type="input" name="username" id="username"  maxlength="30" class="form-control border-img" placeholder="请在此输入昵称">                        
						</div>
						<span class="error-msg"></span>
					</div>
					<div class="reg-line">
						<label>输入密码</label>
						 <div class="form-group has-feedback  reg">
							<input type="password" name="password" id="password" class="form-control" placeholder="请在此输入8到16位密码">                        
						</div>
						<span class="error-msg"></span>
					</div>
					<div class="reg-line">
						<label>确认密码</label>
						 <div class="form-group has-feedback  reg">
							<input type="password" name="repassword" id="repassword" class="form-control" placeholder="请在确认入密码">                        
						</div>
						<span class="error-msg"></span>
					</div>
					<div class="reg-line second-box" style="margin-top:25px;">
						<button type="button" class="button-add" onclick="showReg('reg-second');resetCode()">上一步</button>
						<button type="button" class="button-add" onclick="showReg('sub','submit')">完成</button>
					</div>
				</div>
			</form>
		</div>
		<!-- /.login-box-body -->
	</div>
	<footer class="mobile-display-none">
		<span>Copyright©2018  版权所有 上海垤诗教育科技有限公司</span>
		<a target="_blank" href="http://www.miibeian.gov.cn/">沪ICP备18006983号-2</a>
	</footer>
</body>
<script type="text/javascript">
var mobileTopicSign="pc"	//帖子判断移动端分页数量
    function browserRedirect() {//手机端设置html的font-size
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
        if ( bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            console.log("phone");
            mobileTopicSign = "phone";
            ! function(e, t) {
    			function i() {
    				var t = n.getBoundingClientRect().width / 10;
    				n.style.fontSize = t + "px", p.rem = e.rem = t
    			}
    			var a, r = e.document,
    				n = r.documentElement,
    				o = r.querySelector('meta[name="viewport"]'),
    				l = r.querySelector('meta[name="flexible"]'),
    				m = r.querySelector('meta[name="flexible-in-x5"]'),
    				s = !0,
    				d = 0,
    				c = 0,
    				p = t.flexible || (t.flexible = {});
    			if(o) {
    				console.warn("将根据已有的meta标签来设置缩放比例");
    				var u = o.getAttribute("content").match(/initial\-scale=([\d\.]+)/);
    				u && (c = parseFloat(u[1]), d = parseInt(1 / c))
    			} else if(l) {
    				var f = l.getAttribute("content");
    				if(f) {
    					var h = f.match(/initial\-dpr=([\d\.]+)/),
    						v = f.match(/maximum\-dpr=([\d\.]+)/);
    					h && (d = parseFloat(h[1]), c = parseFloat((1 / d).toFixed(2))), v && (d = parseFloat(v[1]), c = parseFloat((1 / d).toFixed(2)))
    				}
    			}
    			if(m && (s = "false" !== m.getAttribute("content")), !d && !c) {
    				var x = (e.navigator.appVersion.match(/android/gi), e.chrome),
    					g = e.navigator.appVersion.match(/iphone/gi),
    					b = e.devicePixelRatio,
    					w = /TBS\/\d+/.test(e.navigator.userAgent),
    					y = !1;
    				try {
    					y = "true" === localStorage.getItem("IN_FLEXIBLE_WHITE_LIST")
    				} catch(e) {
    					y = !1
    				}
    				c = 1 / (d = g || x || w && s && y ? b >= 3 && (!d || d >= 3) ? 3 : b >= 2 && (!d || d >= 2) ? 2 : 1 : 1)
    			}
    			if(n.setAttribute("data-dpr", d), !o)
    				if((o = r.createElement("meta")).setAttribute("name", "viewport"), o.setAttribute("content", "initial-scale=" + c + ", maximum-scale=" + c + ", minimum-scale=" + c + ", user-scalable=no"), n.firstElementChild) n.firstElementChild.appendChild(o);
    				else {
    					var E = r.createElement("div");
    					E.appendChild(o), r.write(E.innerHTML)
    				}
    			e.addEventListener("resize", function() {
    				clearTimeout(a), a = setTimeout(i, 300)
    			}, !1), e.addEventListener("pageshow", function(e) {
    				e.persisted && (clearTimeout(a), a = setTimeout(i, 300))
    			}, !1), "complete" === r.readyState ? r.body.style.fontSize = 12 * d + "px" : r.addEventListener("DOMContentLoaded", function(e) {
    				r.body.style.fontSize = 12 * d + "px"
    			}, !1), i(), p.dpr = e.dpr = d, p.refreshRem = i, p.rem2px = function(e) {
    				var t = parseFloat(e) * this.rem;
    				return "string" == typeof e && e.match(/rem$/) && (t += "px"), t
    			}, p.px2rem = function(e) {
    				var t = parseFloat(e) / this.rem;
    				return "string" == typeof e && e.match(/px$/) && (t += "rem"), t
    			}
    		}(window, window.lib || (window.lib = {}));
        }
    }
    browserRedirect();

var count = 30; //手机验证码间隔时间（秒）
$(document).ready(function() {
	$(".reg-second input").blur(function(){
		vaildSecond()
	});
	$(".reg-third input").blur(function(){
		vaildThird()
	});
	
	  /* $("#mobile").intlTelInput({
	      preferredCountries: ['cn', 'mo', 'tw', 'hk'],
	      separateDialCode: true,
	    })
	    
	    $("#country").intlTelInput({
	      preferredCountries: ['cn', 'mo', 'tw', 'hk'],
	    })
	    $("#country").on("countrychange", function(e, countryData) {
	    	 $(".showCountry").text(countryData.name);
	    	 $("#country").val(countryData.name)
	    	 $(".showCountry").attr("title",countryData.name);
	    	 $("#mobile").intlTelInput("setCountry", countryData.iso2);
	    });
	  $("#mobile").on("countrychange", function(e, countryData) {
	    	 $("input[name=zoneNumber]").val(countryData.dialCode);
	    });
	  $("#country").val("中国"); */
})

function agreeRegistry(){
	$(".login-box.registry").addClass("layui-hide");
	$(".login-box.reg").removeClass("layui-hide");
}
/* 发送手机验证码 */
function checkCode(){
	if($("#mobile").val()!=''){
		curCount = count; 
	　　//设置button效果，开始计时 
	    $(".sendCode").addClass("disabledBtn"); 
		$.ajax({
			  type:"POST",
			  url:"/sendSms",
			  data:{phoneNum:$("#mobile").val()},
			  contentType: "application/x-www-form-urlencoded; charset=utf-8",  
			  success:function(data){
				  if(data == "success"){
					   $(".sendCode").text(curCount + "秒后可重新发送"); 
					  InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次 
				  }else{
					  $(".sendCode").removeClass("disabledBtn");//启用按钮 
			          $(".sendCode").text("发送验证码"); 
					  console.log("失败");
				  }
			  }
		  })
	}
	
}

//手机验证延时发送
function SetRemainTime() { 
      if (curCount == 0) {         
        window.clearInterval(InterValObj);//停止计时器 
        $(".sendCode").removeClass("disabledBtn");//启用按钮 
        $(".sendCode").text("重新发送验证码"); 
      } 
      else { 
        curCount--; 
        $(".sendCode").text(curCount + "秒后可重新发送"); 
      } 
 } 

/*翻页，验证函数  */
function showReg(page,vaild){
	if(vaild==null){
		$(".reg-page").addClass("layui-hide");
		$("."+page).removeClass("layui-hide");
	}else if(vaild == "phone"){
		var isVaild = vaildFirst();
		if(isVaild){
			//var informationMobile = $("#mobile").intlTelInput("getSelectedCountryData");
			$("#userPhone").text($("#mobile").val() );
			checkCode()
			$(".reg-page").addClass("layui-hide");
			$("."+page).removeClass("layui-hide");
		}
	}else if(vaild == "code"){
		var isVaild = vaildSecond();
		if(isVaild){
			$(".reg-page").addClass("layui-hide");
			$("."+page).removeClass("layui-hide");
		}
	}else{
		var isVaild = vaildThird();
		if(isVaild){
			$("#loginForm").submit();
		}
	}
}

/* 验证函数1 */
function vaildFirst(){
	$(".reg-first span.error-msg").text("");
	$(".error").removeClass("error");
	var mobileReg =  /^[0-9]{11}$/;
	if($("#mobile").val().length ==0){
		showError("mobile","请输入手机号")
		return false;
	}else{
		var isreturn = true;
		$.ajax({
			  type:"POST",
			  url:"/checkoutUser",
			  data: {parm: $("#mobile").val(),flag:3},
			  async: false,
			  success:function(data){
					if(data.mobile == "1"){
						isreturn = false;
					}
			  }
		  })
		  if(isreturn!=true){
			  showError("mobile","该手机号被占用 换个试试")
			  return false; 
		  }
		 
	}
	if( !mobileReg.test($("#mobile").val()) ){
		showError("mobile","手机号格式有误")
		return false;
	} 
	return true;
}
/* 验证函数2 */
function vaildSecond(){
	$(".reg-second span.error-msg").text("");
	$(".error").removeClass("error");
	if($("#telCode").val().length ==0){
		showError("telCode","请输入验证码")
		return false;
	}else{
		var isreturn = true;
		$.ajax({
			  type:"POST",
			  url:"/checkTelCode",
			  async: false,
			  data: {smsCode: $("#telCode").val()},
			  success:function(data){
				  if(data == "error"){
					  isreturn = false;
				  }
			  }
		  })
		  if(isreturn!=true){
			  showError("telCode","验证码输入有误")
			  return false; 
		  }
	}
	return true;
}

/* 验证函数3 */
function vaildThird(){
	$(".reg-third span.error-msg").text("");
	$(".error").removeClass("error");
	var nameType = /^(?![0-9]*$)[A-Za-z0-9\u4e00-\u9fa5]{2,15}$/;
	var passwordNumber = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]{8,16}$/;
	if($("#username").val().length <=0){
		showError("username","请输入昵称");
		return false;
	}else if (!nameType.test($("#username").val())){
		showError("username","昵称支持数字，字母的组合，不能为纯数字，2--15位字符长度");
		return false;
	}else{
		var isreturn = true;
		$.ajax({
			  type:"POST",
			  url:"/checkoutUser",
			  data: {parm: $("#username").val(),flag:1},
			  async: false,
			  success:function(data){
					if(data.username == "1"){
						isreturn = false;
					}
			  }
		  })
		  if(isreturn!=true){
			  showError("username","该昵称被占用 换个试试")
			  return false; 
		  }else{
			  var status = "";
				$.ajax({
					  type:"POST",
					  url:"/checkConent",
					  data: {"content": $("#username").val()},
					  async: false,
					  success:function(data){
						   var result = JSON.parse(data.requestmsg);
						   var resultsType = result.data[0].results[0].label;
						   if(result.data[0].results[0].suggestion!="pass"){
							   switch (resultsType)
								  {
								  case "spam":
									  status='您的昵称包含垃圾信息';
								    break;
								  case "ad":
									  status='您的昵称包含广告信息';
								    break;
								  case "politics":
									  status='您的昵称包含渉政信息';
								    break;
								  case "terrorism":
									  status='您的昵称包含暴恐信息';
								    break;
								  case "abuse":
									  status='您的昵称包含辱骂信息';
								    break;
								  case "porn":
									  status='您的昵称包含色情信息';
								    break;
								  case "flood":
									  status='您的昵称包含灌水信息';
								    break;
								  case "contraband":
									  status='您的昵称包含违禁信息';
								    break;
								  }
						   }
					  },
					  error:function(data){
						  console.log(data.requestmsg)
					  },
				  })
				  if(status!=""){
					  showError("username",status);
					  return false; 
				  }
		  }
		 
	}
	if($("#password").val().length ==0){
		showError("password","请输入密码")
		return false;
	}
	if(!passwordNumber.test($("#password").val())){
		showError("password","8~16位，数字,字母，字符至少包含两种")
		return false;
	}
	if($("#repassword").val().length ==0){
		showError("repassword","请输入密码")
		return false;
	}
	if($("#repassword").val() != $("#password").val()){
		showError("repassword","密码不一致，请重新填写")
		return false;
	}
	return true;
}

/*错误信息展示  */
function showError(id,text){
	$("#"+id).parents(".reg-line").addClass("error");
	$("#"+id).parents(".reg-line").find("span.error-msg").text(text);
}
/* 返回上一步清除验证码 */
function resetCode(){
	$("#telCode").val('');
	$("#telCode").parents('.reg-line').find('.error-msg').text('');
	window.clearInterval(InterValObj);//停止计时器 
    $(".sendCode").removeClass("disabledBtn");//启用按钮 
    $(".sendCode").text("重新发送验证码"); 
}
function showMenu(){
	console.log("打开menu");
	$(".phone-menu-box").removeClass("phone-menu-box-hide");
	$(".phone-menu-box").addClass("phone-menu-box-show");
	$("#modal").addClass("modal");
	$("html,body").css({"overflow":"hidden","height":"100%"});
}
function hideMenu(){
	console.log("关闭menu");
	$(".phone-menu-box").removeClass("phone-menu-box-show");
	$(".phone-menu-box").addClass("phone-menu-box-hide");
	$("#modal").removeClass("modal");
	$("html,body").css({"overflow":"inherit","height":"inherit"});
}
</script>
</html>